{% include 'header.html' %}
<p>&nbsp;</p>
<form class="layui-form" id="userform" action="/update" method="POST">
{% for key in fields %}
    {% if key == "id" %}
    {% elif  key == "question_group_id" %}
    <div class="layui-form-item">
        <label class="layui-form-label">所属区域</label>
        <div class="layui-input-block">
            <input id="select_users" type="text" name="question_group_name" autocomplete="on" placeholder="请点击下面搜索图标进行选择"
                   class="layui-input">
            <i class="layui-icon iconSerch">点击选择</i>
            <input id="question_group_id" name="question_group_id" type="hidden" value="">
        </div>
    </div>
    <div id="showChooseDiv" class="showChooseDiv" style="display: none;  padding: 20px">
        <div id="dept_main" style="margin-right: 2%;">
            <div id="dept_tree"></div>
            <div class="layui-form-item float-right">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal layui-btn-sm" id="lay-submit-Choose">关闭
                    </button>
                </div>
            </div>
        </div>
    </div>
    {% elif  key == "question_group_name" %}
    {% elif  key == "content" %}
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">{{ fields[key]["title"] }}</label>
        <div class="layui-input-block">
            <input type="hidden" id="content" name="content" value="">
            <button type="button" class="layui-btn" id="addAnswer">添加新的答案选项</button>
            <button class='layui-btn' id="btn">删除</button>
            <ul id="answer_ul">
            </ul>
        </div>
    </div>
    {% else %}
    {%if key == "userid"%}
    <input name="{{ key }}" type="hidden">
    {% else %}
    <div class="layui-form-item">
        <label class="layui-form-label">{{ fields[key]["title"] }}</label>
        <div class="layui-input-block">
            {% if fields[key]["title"] ==  "题目类型" %}
            <select id="fruits" name="qtype">
                <option value="">请选择</option>
                <option value="单选题">单选题</option>
                <option value="多选题">多选题</option>
            </select>
            {% else %}
            <input type="text" name="{{ key }}" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
            {% endif %}
        </div>
    </div>
    {% endif %}
    {% endif %}
{% endfor %}
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script>
var nowcnt = 0
function randomString(e) {
    var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678";
    return t[e]
}
function del_li(nodename){
    $("#"+nodename)
}
window.onload = function (){
    let btn = document.getElementById('btn');
    btn.onclick = function (){
        let flther =document.querySelector('#answer_ul');
        let chi =document.querySelectorAll('#answer_ul li');
        //从下往上删
        flther.removeChild(chi[chi.length-1]);
        nowcnt -= 1;
        //删除所有
        // flther.remove(chi)
        return false;
    }
}

layui.use('layer',function(){
    var layer = layui.layer;
    var $ = layui.$;
    $("#addAnswer").click(function (event) {
       $('#answer_ul').append("<li id='li_"+nowcnt+"'><span id='cols_"+nowcnt+"'>"+randomString(nowcnt)+"</span><input id='val_"+nowcnt+"'></li>");
       nowcnt += 1
    });
  })
layui.use('form', function(){
  var form = layui.form;

  // 监听提交事件
  form.on('submit(formDemo)', function(data){
    // 阻止表单默认提交行为
    // data.preventDefault(); // 如果使用这行代码也可以阻止默认提交
    var rs = [];
    for(var n=0;n<nowcnt;n++){
        rs.push($('#cols_'+n).text()+"||"+$('#val_'+n).val());
    }
    var content = rs.join("|||");
    data.field["content"] = content;
    var field = data.field; // 获取表单所有字段，包含提交按钮的name值
    // 使用Ajax进行异步提交
    layui.jquery.ajax({
      url: '/common/add?model={{model}}', // 服务器接口
      type: 'post',
      contentType: 'application/json',
      data: JSON.stringify(data.field), // 将表单数据转为JSON字符串
      success: function(res){
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index);
        parent.location.reload();
      }
    });

    // 返回false阻止表单默认提交
    return false;
  });
});
function get_class() { //获取节点数据
    var treeData = [];
    layui.$.ajax({
        url: '/common/get_class', //接口
        type: 'get', //请求方式
        async: false, //同步请求
        success: function(result) {
            treeData = result.data;
        }
    });
    console.log('节点数据：', treeData);
    return treeData;
}
var files;
var form;
var layer;
var $;
var transfer;
layui.use(['layer', 'tree'], function() {
    var $ = layui.jquery;
    layer = layui.layer;
    var tree = layui.tree;
    //树形组件复选框
    var data = get_class();
    tree.render({
        elem: '#dept_tree',
        data: data,
        edit: [],
        showCheckbox: false,
        showRadio: true,
        id: 'treeId',
        onlyIconControl: true,
        isJump: true,
        click: function(obj) {
            var data = obj.data; //获取当前点击的节点数据
            $("[name='question_group_name']").val(data.title);
            $("#question_group_id").val(data.id);
            $("#lay-submit-Choose").click();
        },
    });

    //打开选择页
    $("body").on("click", ".iconSerch", function() {
        var dataInto = $(this).prev().attr("name");
        $("#lay-submit-Choose").attr("data-into", dataInto);
        var dataDicType = "";
        if (dataInto.lastIndexOf('.') == -1) {
            dataDicType = dataInto;
        } else {
            dataDicType = dataInto.substr(dataInto.lastIndexOf('.') + 1)
        }

        layer.open({
            type: 1,
            title: "选择",
            area: ['50%', '100%'],
            content: $(".showChooseDiv"),
            maxmin: false,
            shadeClose: true,
            shade: false,
        });
    });
    //选择页确定
    $("#lay-submit-Choose").on("click", function() {
        layer.close(layer.index);
        return false;
    });
    //渲染字典项选择
    function renderChoose(dataDicType) {
        layer.alert("请选择一项");
    };
});    
</script>
{% include 'footer.html' %}